<!--
 * @Descripttion: 出口文件
 * @version: 
 * @Author: 张敬坤
 * @Date: 2023-08-22 10:02:34
 * @LastEditors: Jikel
 * @LastEditTime: 2023-08-22 10:50:35
-->
<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" class="fade">
      <!-- 子组件使用过渡结构 -->
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<script></script>

<style scoped>
.fade-enter-active {
  animation: ami .8s;
}
@keyframes ami {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* .fade-leave-active {
  animation: amiro 30s;
  transform-origin: center center;
}

@keyframes amiro {
  0% {
    transform: translateX(0) rotateZ(0);
  }
  100% {
    transform: translateX(-100%) rotateZ(-180deg);
  }
} */
</style>
